<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
	<style>
	.father{
	    width: 100%;
	    height: 100%;
	}
	.mask{
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    background: #000;
	    opacity: 0.3;
	}
	button{
	    width: 100px;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	}
	.child{
	    position: fixed;
	    width: 400px;
	    height: 400px;
	    border: 1px solid #ccc;
	    text-align: center;
	    line-height: 400px;
	    top: calc(50% - 200px);
	    left: calc(50% - 200px);
	    background: #fff;
	}
	</style>
</head>
<body>
<div id="app"></div>
<script>
var dom = {
	template:`
		<div class="father">
	        <div class="mask" v-show="maskShow" @click="setMaskShow"></div>
	        <div class="child" id="child" v-show="maskShow">
	            <button @click="setMaskShow">关闭</button>
	        </div>
	        <button @click="setMaskShow">click</button>
	    </div> `
}
new Vue({
	el:'#app',
	template:`
		<div class="father">
	        <div class="mask" v-show="maskShow" @click="setMaskShow"></div>
	        <div class="child" id="child" v-show="maskShow">
	            <button @click="setMaskShow">关闭</button>
	        </div>
	        <button @click="setMaskShow">click</button>
	    </div> `,
    data:{
            maskShow: false,
        
    },
    methods: {
        setMaskShow(){
            this.maskShow = !this.maskShow;
        }
    }
})
</script>


</body>
</html>